<template>
  <div class="redirect-page">
    <div class="card">
      <h1 class="text-3xl font-bold mb-6 text-white">🎉 欢迎来到娱乐中心!</h1>
      <p class="mb-10 text-white">请选择您要玩的项目：</p>

      <div class="space-y-4">
        <el-button type="warning" size="large" @click="goToMusic">
          👤 音乐播放中心
        </el-button>
        <el-button type="warning" size="large" @click="goToGameView">
          📝 开始拼图游戏
        </el-button>
        <el-button type="warning" size="large" @click="goToUserProfile">
          返回用户中心
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { startGame } from "../api/gameView";

const router = useRouter();

const goToGameView = async () => {
  const res = await startGame();
};

/* const goToGameView = () => {
  ElMessage({
    message: '功能尚未开发，敬请期待！',
    type: 'warning',
    duration: 2000,
  })
} */

const goToMusic = () => router.push("/api/music");
const goToUserProfile = () => router.push("/api/userProfile/userProfiles");
</script>



<style scoped>
.redirect-page {
  height: 100vh;
  background: url("../assets/che.jpg") center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background-color: rgba(250, 250, 250, 0.6); /* 半透明黑色背景 */
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
}
</style>
